<template>
  <Header></Header>
  <Drawer></Drawer>
  <el-breadcrumb separator="/" style="font-size: 20px;color: #2AB28B;">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/pageList/' + ids }">档案管理</el-breadcrumb-item>
  </el-breadcrumb>

  <div class='pageListBotton'>
    <el-button :icon="Edit" style="color: white;background: #2AB28B" round @click="onPageAdd">
      新建档案
    </el-button>
    <el-button v-if="type_1=='true'" :icon="Expand" style="color: white;background: #CA1C1B" round @click="onHighList">
      高危儿列表
    </el-button>

    <span class="onBtnRight" @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
  </div>

  <div class="pageListBotton">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名" style="width:140px;height:40px">
        <el-input  v-model="name" placeholder="请输入姓名" @input="nameInput($event)"></el-input>
      </el-form-item>
      <el-form-item label="监护人" style="width:256px;height:40px">
        <el-input v-model="guardian" placeholder="请输入监护人姓名"></el-input>
      </el-form-item>

      <!-- <el-form-item >
        <div class="page_provider_title">出生日期</div>
        <el-config-provider :locale="zhCn" >
          <el-date-picker
              v-model="birth"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :style="{'float':'left','width':'270px'}"
          ></el-date-picker>
        </el-config-provider>
      </el-form-item>

      <el-form-item >
        <el-config-provider :locale="zhCn">
          <div class="page_provider_title">创建时间</div>
          <el-date-picker
              v-model="establish"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :style="{'float':'left','width':'270px'}"
          ></el-date-picker>
        </el-config-provider>
      </el-form-item> -->
      <el-form-item style="width:148px;height:40px">
        <el-button type="success" @click="search()">搜索</el-button>
        <el-button Plain @click="resetting()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div id="list">
    <el-table :data="tableData" style="width: 85%;margin-left: 5%;height:100%">
    <div class="loading" v-if="loading">
      <span id="load-text">{{ loadText }}</span>
    </div>
    <el-table-column width="" prop="id" label="序号" />
    <el-table-column width="" prop="username" label="姓名" />
    <el-table-column width="" prop="sex" label="性别">
      <template #default="scope">
        <span v-if="scope.row.sex == 2">男</span>
        <span v-if="scope.row.sex == 1">女</span>
      </template>
    </el-table-column>
    <el-table-column width="" prop="height" label="身高" />
    <el-table-column width="" prop="weight" label="体重" />
    <el-table-column width="" prop="birth" label="出生日期" />
    <el-table-column width="" prop="guardian_name" label="监护人姓名" />
    <el-table-column width="" prop="guardian_mobile" label="监护人手机号" />

    <!-- <el-table-column width="" prop="numbers" label="测评次数">
      <template #default="scope">
        <span>{{ scope.row.numbers }}次</span>
      </template>
    </el-table-column> -->

    <el-table-column  prop="createtime" label="测评时间" width="" />
    <el-table-column width="" fixed="right" label="操作档案">
      <template #default="scope">
        <div style="display:flex">
          <el-button type="text" size="small" @click="handleClick(scope.row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="onEvaluation(scope.row.id)">测评</el-button>
          <el-button type="text" size="small" @click="onGetReport(scope.row.id)">报告</el-button>
        </div>

      </template>
    </el-table-column>
  </el-table>
    <el-pagination
    background
    layout="prev, pager, next"
    :total="toTal"
    @prev-click="onPrevBut"
    @next-click="onNextBut"
    @current-change="nowPage"
    :current-page="pageData.page"
    :page-size="pageData.pageSize"
    style="width:50%;margin:30px auto;text-align:center;"
    >
   </el-pagination>
  </div>
  


  <el-dialog v-model="dialogTableVisible" title="查看报告" width="60%">
    <el-table :data="gridData" @row-click="onLookReport">
      <el-table-column property="username" label="姓名" width="150"></el-table-column>
      <el-table-column property="guardian_name" label="监护人姓名" width="200"></el-table-column>
      <el-table-column property="guardian_mobile" label="监护人手机号" width="150"></el-table-column>
      <el-table-column property="report" label="报告" width="200"></el-table-column>
      <el-table-column property="id" label="操作">
        <el-button type="primary" style="width: 100px">查看报告</el-button></el-table-column>

    </el-table>
  </el-dialog>


  <!--    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">-->
  <!--      <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>-->
  <!--    </ul>-->
</template>

<script>
import { Edit, CirclePlus, Search, Expand, } from '@element-plus/icons-vue'
import Header from './common/Header.vue';
import { ElMessage } from "element-plus";
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import Drawer from './common/Drawer.vue';

export default {
  name: "pageList",
  components: {
    Header,
    Drawer,
  },
  data() {
    return {
      toTal:'',
      labelPosition: 'top',
      labName: '',
      ids: '',
      zhCn,
      name: '',
      guardian: '',
      birth: [],
      establish: [],
      pages: 0,
      totalPages: '',
      limit: 20,
      loading: false,
      loadText: '正在加载...',
      tableData: [],
      oldScrollTop: 0,
      pageData: {
        // 页码
        page: '1',
        // 一页的数据个数
        pageSize: 20,
        // 总数
        total:0
      },
      is_height:0,
      type_1:'',


    }
  },
  created() {
    this.onDefault(this.pages);
  },
  // mounted() {
  //   // 监听页面滚动事件
  //   // document.getElementById("list").addEventListener("scroll", this.scrolling, true)
  //   window.addEventListener("scroll", this.scrolling,true)
  // },
  methods: {
    nameInput(e){
      this.name=e;
    },
    //当前页
   async nowPage(page){
    if(this.name && this.guardian){
        this.pages=page;
        let params = {
              'group_id': this.ids,
              'guardian_name': this.guardian,
              'limit': this.limit,
              'pages':this.pages,
              'username':this.name,
            }
            let data = await this.$getPageList(params)
            this.tableData = data.data.data.contents;
    }else if(this.name){
        this.pages=page;
        let params = {
              'group_id': this.ids,
              'guardian_name': '',
              'limit': this.limit,
              'pages':this.pages,
              'username':this.name,
            }
            let data = await this.$getPageList(params)
            this.tableData = data.data.data.contents;
    }else if(this.guardian){
        this.pages=page;
        let params = {
              'group_id': this.ids,
              'guardian_name': this.guardian,
              'limit': this.limit,
              'pages':this.pages,
              'username':'',
            }
            let data = await this.$getPageList(params)
            this.tableData = data.data.data.contents;
    }else {
      this.pages=page;
      let params = {
            'group_id': this.ids,
            'pages': this.pages,
            'limit': this.limit,
            'is_high':'',
          }
          let data = await this.$getPageList(params)
          this.tableData = data.data.data.contents;
    }
    
     
    },
    // 上一页
  async  onPrevBut(page){
    if(this.name && this.guardian){
      this.pages=page;
        let params = {
              'group_id': this.ids,
              'guardian_name': this.guardian,
              'limit': this.limit,
              'pages':this.pages,
              'username':this.name,
            }
            let data = await this.$getPageList(params)
            this.tableData = data.data.data.contents;
    }else if(this.name){
        this.pages=page;
        let params = {
              'group_id': this.ids,
              'guardian_name': '',
              'limit': this.limit,
              'pages':this.pages,
              'username':this.name,
            }
            let data = await this.$getPageList(params)
            this.tableData = data.data.data.contents;
    }else if(this.guardian){
        this.pages=page;
        let params = {
              'group_id': this.ids,
              'guardian_name': this.guardian,
              'limit': this.limit,
              'pages':this.pages,
              'username':'',
            }
            let data = await this.$getPageList(params)
            this.tableData = data.data.data.contents;
    }else {
        this.pages=page;
        let params = {
              'group_id': this.ids,
              'pages': this.pages,
              'limit': this.limit,
              'is_high':'',
            }
            let data = await this.$getPageList(params)
            this.tableData = data.data.data.contents;
    }
    
     
    },
    // 下一页
  async  onNextBut(page){
    if(this.name && this.guardian){
      this.pages=page;
        let params = {
              'group_id': this.ids,
              'guardian_name': this.guardian,
              'limit': this.limit,
              'pages':this.pages,
              'username':this.name,
            }
            let data = await this.$getPageList(params)
            this.tableData = data.data.data.contents;
    }else if(this.name){
      this.pages=page;
        let params = {
              'group_id': this.ids,
              'guardian_name': '',
              'limit': this.limit,
              'pages':this.pages,
              'username':this.name,
            }
            let data = await this.$getPageList(params)
            this.tableData = data.data.data.contents;
    }else if(this.guardian){
        this.pages=page;
        let params = {
              'group_id': this.ids,
              'guardian_name': this.guardian,
              'limit': this.limit,
              'pages':this.pages,
              'username':'',
            }
            let data = await this.$getPageList(params)
            this.tableData = data.data.data.contents;
    }else {
      this.pages=page;
      let params = {
            'group_id': this.ids,
            'pages': this.pages,
            'limit': this.limit,
            'is_high':'',
          }
          let data = await this.$getPageList(params)
          this.tableData = data.data.data.contents;
    }
    
    },
    //重置
    async resetting() {
      let params = {
        'group_id': this.ids,
        'pages': 1,
        'limit': this.limit,
      }
      let data = await this.$getPageList(params)
      this.tableData = data.data.data.contents;
      this.toTal=data.data.data.countPage;
      this.name = '';
      this.guardian = '';
    },
    //搜索
    async search() {
      if(this.is_height==0){
          let params = {
          'group_id': this.ids,
          'pages': '',
          'limit': this.limit,
          'username':this.name,
          'guardian_name': this.guardian
        }
        let data = await this.$getPageList(params)
        this.tableData = data.data.data.contents;
        this.toTal=data.data.data.countPage;
      }else{

          let params = {
              'group_id': this.ids,
              'pages': this.pages,
              'limit': this.limit,
              'is_high':'是',
              'username':this.name,
              'guardian_name': this.guardian
            }
        let data = await this.$getPageList(params);
        console.log(data,'123')
        this.tableData = data.data.data.contents;
        this.toTal=data.data.data.countPage;
      }
      
    },
    // scrolling() {
    //   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //   let clientHeight = document.documentElement.clientHeight;
    //   let scrollHeight = document.documentElement.scrollHeight;//内容高度
    //   console.log(scrollTop, '滚动条距文档顶部的距离')
    //   console.log(clientHeight, '可视高度')
    //   console.log(scrollHeight, '内容高度')
    //   if (scrollTop + clientHeight == scrollHeight) {
    //     this.onDefault(this.pages);
    //   }

    // },
    load() {
      // //滑到底部时进行加载
      // this.loading = true;
      // console.log('底部')
      // this.pages+1;
      // this.onDefault(this.pages); //调用接口，此时页数+1，查询下一页数据
    },
    async onDefault(pages) {
      this.pages = pages + 1;
      if (this.$route.params.groupId) {
        this.ids = this.$route.params.groupId
        if (this.ids == 3) {
          this.labName = '婴幼儿营养测评'
        } else if (this.ids == 5) {
          this.labName = '孕产妇营养测评'
        } else if (this.ids == 6) {
          this.labName = '成年人营养测评'
        } else if (this.ids == 7) {
          this.labName = '慢性病营养测评'
        } else if (this.ids == 8) {
          this.labName = '团体营养测评'
        }
        http.get('api/index/getAuth').then((res)=>{
          let aray=res.data.data;
          let array=aray.split(',');
          if(array.includes('9')){ 
            this.type_1='true'
          }else{
            this.type_1='false'
          }
        })
        //   if(isReset == 1) {
        //     this.name = '';
        //     this.guardian = '';
        //     this.birth = '';
        //     this.establish = '';
        //   }



        //   if (this.name != "") {
        //     params.username = this.name
        //   }
        //   if (this.guardian != "") {
        //     params.guardian_name = this.guardian
        //   }
        //   if (this.birth[0] != undefined) {
        //     params.birth_start = this.$getTimes(this.birth[0]);
        //   }
        //   if (this.birth[1] != undefined) {
        //     params.birth_end = this.$getTimes(this.birth[1]);
        //   }
        //   if (this.establish[0] != undefined) {
        //     params.start_time = this.$getTimes(this.establish[0]);
        //   }
        //   if (this.establish[1] != undefined) {
        //     params.end_time = this.$getTimes(this.establish[1]);
        //   }

        //   params.pages = this.pages
        if (this.pages == 0) {
          let params = {
            'group_id': this.ids,
            'pages': this.pages,
            'limit': this.limit,
            'is_high':'',
          }
          let data = await this.$getPageList(params)
          this.tableData = data.data.data.contents;
          this.toTal=data.data.data.countPage;
        } else {
          let params1 = {
            'group_id': this.ids,
            'pages': this.pages,
            'limit': this.limit,
            'is_high': '',
          }
          let data = await this.$getPageList(params1)
          this.tableData = [...this.tableData, ...data.data.data.contents]
          this.toTal=data.data.data.countPage;
        }



        // let len = data.data.data.contents.length



        // if (data && len == 0 && !len) {
        //   this.loadText = '没有找到相关数据'
        // } else if (data && len < 10) {
        //   this.loadText = '暂无更多数据'
        // } else {
        //   this.loading = false
        // }

        // if(addTo == 1){
        //   this.tableData = this.tableData.concat(data.data.data.contents); //因为每次后端返回的都是数组，所以这边把数组拼接到一起
        // } else {
        //   this.tableData = data.data.data.contents;
        //   console.log(this.tableData,'789')
        // }

        //   this.totalPages = data.data.data.totalPages;
        // } else {
        //   ElMessage.error('栏目编号不得为空')
        //   await this.$router.push({'path': '/Home'})
      }
    },
    onHome() {
      this.$router.push({ 'path': '/Home/' })
    },
    onPageAdd() {
      this.$router.push({ 'path': '/pageAdd/' + this.ids })
    },
   async onHighList() {
      // ElMessage.error('敬请期待')
      // this.$router.push({ 'path': '/HighList/' + this.ids })
      console.log(this.pages)
      this.is_height=1;
      let params = {
            'group_id': this.ids,
            'pages': this.pages,
            'limit': this.limit,
            'is_high':'是',
          }
      let data = await this.$getPageList(params)
      this.tableData = data.data.data.contents;
      this.toTal=data.data.data.countPage;
    },
    handleClick(ids) {
      this.$router.push({ 'path': '/pageEdit/' + this.ids + '/' + ids })
    },
    onEvaluation(ids) {
      this.$router.push({ 'path': '/Evaluation/' + this.ids + '/' + ids })
    },

    onCompanyList(ids) {
      this.$router.push({ 'path': '/CompanyList/' + this.ids })
    },


    formInline() {

    },
  },
}

</script>

<script setup>
import { useRoute, useRouter } from "vue-router"
import { reactive, ref } from 'vue'
import { ElMessage } from "element-plus";
import http from "../utils/http";
const dialogTableVisible = ref(false)
const formLabelWidth = '120px'
const gridData = ref([])
const route = useRoute()
const router = useRouter()
const name = ref('')
const guardian = ref('')
const establish = ref([])
const onGetReport = async (id) => {
  console.log(id)
  http.get('api/archives/generatelist?id=' + id + '&type=analysis').then((res) => {
    // console.log(res.data.data.archivesReport,'wuhu')
    if (res.data.code === 0) {
      ElMessage.error(res.data.msg)
    } else {

      gridData.value = res.data.data.archivesReport
      dialogTableVisible.value = true
    }
  })
  // await router.push({'path': '/Home'})
}
const onLookReport = async (row) => {
  console.log(row)
  const { href } = await router.resolve({
    path: "/reportView/" + row.group_id + "/" + row.member_id + '/' + row.id
  });
  window.open(href, "_blank");

}

</script>

<style scoped>
@media screen and (max-width:1920px) {
  .el-date-editor el-range-editor el-input__inner el-date-editor--daterange {
    width: 270px;
  }
}


@import '../assets/css/common.css';

/deep/.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  /*font-weight: 700;*/
  color: #2AB28B;
  text-decoration: none;
  transition: var(--el-transition-color);
  color: var(--el-text-color-primary);

}
</style>
<style>
.pageListBotton {
  margin-top: 40px;
  margin-left: 120px;
}

.pageListBotton .el-button--primary {
  background-color: #2AB28B;
  border: #2AB28B;
  width: 141px;
  height: 58px;
}

.pageListBotton .el-button--success {
  background-color: #2AB28B;
  border: #2AB28B;
  color: #fff;
}

.onBtnRight {
  cursor: pointer;
  width: 20%;
  font-size: 18px;
  float: right;
  color: #2AB28B;
}

.onBtnRight img {
  width: 14px;
  padding-right: 10px;
}

.onBtnRight:hover {
  color: #409eff;
}

.page_provider_title {

  float: left;
  font-size: 14px;
  padding-right: 10px;
}

.xinjian {
  position: relative;
}

.xinjian img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: 20px;
}

.cell .el-button {
  width: 32px;
}
</style>
